<template>
<div>
  <div v-show="certificateListVisible" class="mod-config">
    <div class="div-s">
    <el-form :label-position="labelPosition" :inline="true" label-width="70px" class="queryFormed">
        <el-row class="row-s">
          <el-col :span="6">
            <el-form-item label="证书类型">
            <el-select v-model="pIdType" @change="jobChange" style="width:100%">
              <el-option
                v-for="item in editableTabs"
                :key="item.id"
                :label="item.name"
                :value="item.code">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="证书类别">
            <el-select v-model="idType" style="width:100%">
              <el-option
                v-for="item in confInfos"
                :key="item.id"
                :label="item.name"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          </el-col>
          <el-col class="col-center" :span="6">
          <el-form-item label="姓名">
          <el-input v-model="name" placeholder="请填写姓名"></el-input>
          </el-form-item>
      </el-col>
      <el-col class="col-right" :span="6">
      <el-form-item class="item-all">
      <el-button v-if="isAuth('certificate:certificateInfo:info')" class="buttonItem" size="mini" plain @click="queryAll()">重 置</el-button>
      <el-button v-if="isAuth('certificate:certificateInfo:info')" class="buttonItem" size="mini" type="primary" @click="clickDataFormSubmit()">搜 索</el-button>
      </el-form-item>
      </el-col>
      </el-row>
    </el-form>
    </div>
    <div class="div-e">
      <div class="div-inquire">
        <div class="in-t">
          <div class="in-ts"></div>
          <h3>证书预警</h3>
        </div>
        <div class="div-button">
        <el-button v-if="isAuth('certificate:certificateInfo:info')" class="div-buttonItemb" size="mini" type="primary" plain icon="el-icon-upload2" @click="exportXls()">数据导出</el-button>
        <el-button class="div-buttonItema" plain  v-if="this.activeName == 'first' && isAuth('certificate:certificateInfo:info')" size="mini" icon="iconfont iconlajixiang" @click="certificateinfoCrashHandler()">作废列表</el-button>
        </div>
        </div>
        <div v-if="activeName =='first'" class="radio-s">
        <span class="yujing">预警状态</span>
         <el-radio @change="changeRadioa" v-model="radioa" :label='3'>三月内到期</el-radio>
         <el-radio @change="changeRadiob" v-model="radioa" :label="1">一月内到期</el-radio>
         <el-radio @change="changeRadioc" v-model="radioa" :label="-1">已逾期</el-radio>
        </div>
        <div v-else class="radio-s">
        <span class="yujing">预警状态</span>
         <el-radio @change="changeRadiod" v-model="radioase" :label='15'>半月内到期</el-radio>
         <el-radio @change="changeRadioe" v-model="radioase" :label="7">七天内到期</el-radio>
         <el-radio @change="changeRadiof" v-model="radioase" :label="3">三天内到期</el-radio>
         <el-radio @change="changeRadiog" v-model="radioase" :label="-1">已逾期</el-radio>
        </div>
    <el-tabs class="tabs-s" v-model="activeName" @tab-click="handleClick">
    <el-tab-pane label="到期预警" name="first">
      <certificate-type ref="child" :pIdType="pIdType"  :idType="idType" :name="name" @clickCertificateListVisible="clickCertificateListVisible" :months="months" :params="params"></certificate-type>
    </el-tab-pane>
    <el-tab-pane label="挂入预警" name="second">
      <certificate-type ref="childa" :pIdType="pIdType" :idType="idType" :name="name" :days="days" :validityType="validityType" :typeE="type" @clickCertificateListVisible="clickCertificateListVisible"></certificate-type>
    </el-tab-pane>
    <el-tab-pane label="挂出预警" name="third">
      <certificate-type ref="childb" :pIdType="pIdType" :idType="idType" :name="name" :days="days" :validityType="validityType" :typeE="type" @clickCertificateListVisible="clickCertificateListVisible"></certificate-type>
    </el-tab-pane>
    <el-tab-pane label="借还预警" name="fourth">
      <certificate-type ref="childc" :pIdType="pIdType" :idType="idType" :name="name" :days="days" :validityType="validityType" :typeE="type" @clickCertificateListVisible="clickCertificateListVisible"></certificate-type>
    </el-tab-pane>
  </el-tabs>
  </div>
    <query-model v-if="queryModelVisible" ref="queryModel" @refreshDataList="setParams"></query-model>
  </div>
  <certificate-detail :types="type" v-if="certificateListVisibleDetail" :flag="flag" :visId="visId"></certificate-detail>
  <certificateinfo-crash v-if="certificateinfoCrashVisible" ref="certificateinfoCrash"></certificateinfo-crash>
  </div>
</template>

<script>
  import Vue from 'vue'
  import merge from 'lodash/merge'
  import CertificateType from '../certifirenewal/warn-type'
  import QueryModel from '../certifirenewal/query-model'
  import CertificateDetail from '../certinfo/certificate-list-detail'
  import CertificateinfoCrash from '../certinfo/certificateinfolist-crash'
  import { eventBus } from '../../../../../eventBus'

  export default {
    data () {
      return {
        queryModelVisible: false,
        certificateListVisible: true,
        certificateinfoCrashVisible: false,
        flag: false,
        kiveList:false,
        certificateListVisibleDetail:false,
        activeName:'first',
        labelPosition:'right',
        loading: true,
        dataEmpty: true,
        months:3,
        radioa:3,
        radioase:15,
        days:15,
        visId:{},
        sanButton:1,
        yiButton:1,
        yuButton:1,
        banButton:1,
        qiButton:1,
        sanButton:1,
        editableTabs: [],
        editableTabsData:'all',
        index: 0,
        days: 15,
        type:null,
        confInfos:[],
        idType:'',
        pIdType:'',
        name:'',
        validityType: 2,
        params: {
          validityType: 2,
          certificateType:'',
          name:'',
          // type:''
        },
        certificateTypes: [
          {
          value: '',
          label: '--全部--'
        },{
          value: 1,
          label: '在职员工'
        }, {
          value: 2,
          label: '挂靠'
        },
        {
          value: 3,
          label: '非在职员工'
        }
        ],
        validityTypes: [
          {
           label: '--全部--',
           value: ''
          },
          {label: '三个月内快到期', value: 0},
          {label: '已到期', value: -1},
          {label: '未到期', value: 1}
        ],
      }
    },
    components: {
      CertificateType, QueryModel, CertificateDetail, CertificateinfoCrash
    },
    created () {
      this.handleClick()
    },
    mounted () {
      this.initJobs()
      eventBus.$on('warn',(msg)=>{
        this.kiveList = msg
        this.clickKive()
      })
    },
    watch: {
    },
    methods: {
      clickKive(){
      if (this.kiveList) {
        this.certificateListVisibleDetail = false
        this.certificateListVisible = true
        this.certificateinfoCrashVisible = false
      }
      },
      changeRadioa(label){
      // console.log(label);
      this.params.validityType = 2
      this.months = label
      this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      changeRadiob(label){
      // console.log(label);
      this.months = label
      this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      changeRadioc(label){
      // console.log(label);
      this.params.validityType = label
      this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      changeRadiod(label){
      this.validityType = 2
      this.days = label
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
      })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
      })
      }
      if(this.activeName == 'fourth'){
      this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
      })
      }
      },
      changeRadioe(label){
      this.validityType = 2
      this.days = label
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
      })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
      })
      }
      if(this.activeName == 'fourth'){
      this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
      })
      }
      },
      changeRadiof(label){
      this.validityType = 2
      this.days = label
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
      })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
      })
      }
      if(this.activeName == 'fourth'){
      this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
      })
      }
      },
      changeRadiog(label){
      this.validityType = -1
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
      })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
      })
      }
      if(this.activeName == 'fourth'){
      this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
      })
      }
      },
      certificateinfoCrashHandler(){
      this.certificateinfoCrashVisible = true
      this.certificateListVisible = false
      //   this.$nextTick(() => {
      //     this.$refs.certificateinfoCrash.init()
      // })
      },
      jobChange(value){
      this.confInfos = []
      this.idType = ''
      this.$http({
        url: this.$http.adornUrl('/certificate/certificateInfo/getJobsConf'),
        method: 'get',
        params: this.$http.adornParams({
                'type': value
              })
      }).then(({data}) => {
        if (data && data.length > 0) {
          this.confInfos = data
        }
      })
      },
      handleClick(tab, event) {
        // this.activeName = tab.name
        console.log(this.activeName);
        if(this.activeName == 'first'){
        this.type = null
        this.params.validityType = 2
        this.months = 3
        this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      }
      if(this.activeName == 'second'){
        this.type = 11
        this.days = 15
        this.validityType = 2
        this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
        })
      }
      // third
      if(this.activeName == 'third'){
        this.type = 21
        this.days = 15
        this.validityType = 2
        this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
        })
      }
      if(this.activeName == 'fourth'){
        this.type = 3
        this.days = 15
        this.validityType = 2
        this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
        })
      }
      },
      routerBack(){
      this.certificateListVisible = true
      this.certificateListVisibleDetail = false
      // this.queryAll()
      },
      clickDataFormSubmit(){
      // this.$refs.child[this.index].getDataListList()
      if(this.activeName == 'first'){
      this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      }
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
      })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
      })
      }
      if(this.activeName == 'fourth'){
      this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
      })
      }

      },
      clickCertificateListVisible(row){
      this.visId = row
      this.certificateListVisible = false
      this.certificateListVisibleDetail = true
      },
      queryAll(){
        this.editableTabsData = 'all'
        this.certificateType = '',
        this.name = '',
        this.idType = ''
        this.pIdType = ''
        this.validityType = 2
        this.days = 15
        this.validityType = 2
        this.months = 3
        this.sanButton = 1
        this.yiButton = 1
        this.yuButton = 1
        this.banButton = 1
        this.qiButton = 1
        this.sanButton = 1
        this.confInfos = []
        // this.yuButton = 1
        this.activeName = 'first'
        this.$nextTick(() => {
          this.$refs.child.getDataList()
        })

      },
      // 导出数据
      exportXls () {
        if(this.activeName == 'first'){
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/export'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams(merge(this.params, {
            // 'status': this.flag ? 'crash' : this.params.status
          'months':this.months
          })),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '到期预警统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        }
        if(this.activeName == 'second'){
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/export'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams({
            // 'status': this.flag ? 'crash' : this.params.status
          'page':1,
          'limit':10,
          'validityType':this.validityType,
          'type':11,
          'days':this.days
          }),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '挂入预警统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        }
        if(this.activeName == 'third'){
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/export'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams({
            // 'status': this.flag ? 'crash' : this.params.status
          'page':1,
          'limit':10,
          'validityType':this.validityType,
          'type':21,
          'days':this.days
          }),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '挂出预警统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        }
        if(this.activeName == 'fourth'){
        this.$http({
          url: this.$http.adornUrl('/certificate/certiTransactionInfo/export'),
          method: 'get',
          responseType: 'blob', // 防止返回乱码
          params: this.$http.adornParams({
            // 'status': this.flag ? 'crash' : this.params.status
          'page':1,
          'limit':10,
          'validityType':this.validityType,
          'type':3,
          'days':this.days
          }),
          showLoading: true
        }).then(({data}) => {
          if (data) {
            const link = document.createElement('a')
            let blob = new Blob([data], {type: 'application/vnd.ms-excel'})
            link.style.display = 'none'
            link.href = URL.createObjectURL(blob)
            let fileName = '借还预警统计.xls'
            link.setAttribute('download', fileName)
            link.download = fileName // 下载的文件名
            document.body.appendChild(link)
            link.click()
            document.body.removeChild(link)
          }
        })
        }
      },
      setParams (params) {
        this.params = params
      },
      updateParams(validityType) {
        this.params.validityType = validityType
        if(validityType === 0){
          this.months = 3
          this.sanButton = 2
          this.yiButton = 1
          this.yuButton = 1
        }
        if(validityType === -1){
          // this.months = 3
          this.yiButton = 1
          this.sanButton = 1
          this.yuButton = 2
        }
        this.$nextTick(() => {
          this.$refs.child.getDataList()
        })
      },
      updateDays(days){
        this.validityType = 0
        this.days = days
        // this.type = 11
        if(this.days == 15){
          this.banButton = 2
          this.qiButton = 1
          this.sanButton = 1
          this.yuButton = 1
        }
        if(this.days == 7){
          this.banButton = 1
          this.qiButton = 2
          this.sanButton = 1
          this.yuButton = 1
        }
        if(this.days == 3){
          this.banButton = 1
          this.qiButton = 1
          this.sanButton = 2
          this.yuButton = 1
        }
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
      })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
      })
      }
      if(this.activeName == 'fourth'){
      this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
      })
      }
      },
      updateDaysd(days){
        this.validityType = -1
        this.days = days
        // this.type = 11
          this.banButton = 1
          this.qiButton = 1
          this.sanButton = 1
          this.yuButton = 2
      if(this.activeName == 'second'){
      this.$nextTick(() => {
          this.$refs.childa.getDataListDasy()
      })
      }
      if(this.activeName == 'third'){
      this.$nextTick(() => {
          this.$refs.childb.getDataListDasy()
      })
      }
      if(this.activeName == 'fourth'){
      this.$nextTick(() => {
          this.$refs.childc.getDataListDasy()
      })
      }
      },
      clickAppear(){
      this.certificateinfoCrashVisible = false
      this.certificateListVisible = true
      this.handleClick()
      },
      uploadParamsb(validityType){
      this.params.validityType = validityType
      this.months = 1
      this.sanButton = 1
      this.yiButton = 2
      this.yuButton = 1
      this.$nextTick(() => {
          this.$refs.child.getDataList()
      })
      },
      uploadParams(validityType){
        this.params.validityType = validityType
        if(validityType === 0){
          this.months = 1
          this.sanButton = 2
          this.yiButton = 1
        }
      },
      initJobs () {
        this.$http({
          url: this.$http.adornUrl('/certificate/certificateInfo/getJobs'),
          method: 'get',
          params: {}
        }).then(({data}) => {
          if (data && data.length > 0) {
            this.editableTabs = data
            this.editableTabs[0].code = 'all'
            this.editableTabsData = 'all'
            setTimeout(() => {
            })
          }
        })
      },
      queryHandle () {
        this.queryModelVisible = true
        this.$nextTick(() => {
          this.$refs.queryModel.init()
        })
      },
      // 全部
      restForm(){
      // this.params = {}
      this.params = {
          certificateType: '',
          name: '',
          validityType: ''
        }
      // this.$refs.child[this.index].init(this.activeName)
      }
    }
  }
</script>

<style lang="scss" scoped>
    .mod-config{
    padding: 15px !important;
    background-color: #F5F7FA;
        // margin-top: 48px;
    }
    .itemButton{
    width: 100%;
    margin-top: 10px !important;
    // margin-bottom: 10px;
}
.div-s{
  width: 100%;
  background-color: #FFFFFF;
}
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.div-e{
  width: 100%;
  background-color: #FFFFFF;
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
  margin-top: 15px;
}
.row-s{
  /deep/.el-col{
    display: flex;
    // justify-content: center;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
  }
}
/deep/.col-right{
.el-form-item{
margin-left: auto!important;
}
}
/deep/.el-col{
    .fazheng{
    .el-form-item__content{
    .el-input--suffix{
    .el-input__inner{
      padding-right: 0px!important;
      padding-left: 30px!important;
       }
     }
   }
 }
}
/deep/.col-center{
  display: flex;
  align-items: center;
  justify-content: center;
}
.queryFormed .el-form-item{
    margin-top: 8px;
    margin-bottom: 8px;
  }
  /deep/.queryFormed .el-form-item{
    .el-select .el-input__inner{
    height: 36px!important;
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
    .el-input--suffix .el-input__inner{
    padding-right: 15px!important;
    padding-left: 15px!important;
    }
  }
.div-inquire{
  width: 100%;
  height: 45px !important;
  background-color: #ffffff;
  // display: flex;
  // align-items: center;
}
.radio-s{
  width: 100%;
  height: 45px !important;
  display: flex;
  align-items: center;
  // background-color: red;
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.in-t{
  width: 70%;
  float: left;
  height: 45px;
  display: flex;
  align-items: center;
  // margin-top: 15px;
  h3{
    font-size: 16px;
    float: left;
    color: #000000;
    margin: 0px !important;
    padding: 0px !important;
  }
}
.in-ts{
  width: 5px;
  height: 18px;
  float: left;
  margin-right: 8px;
  background: #6E92E9;
}
.yujing{
  margin-right: 15px;
}
/deep/.tabs-s .el-tabs__active-bar{
  height: 2px !important;
}
.buttonItem{
  font-size: 14px;
}
.div-button{
  width: 30%;
  float: right;
  margin-top: 15px;
}
.div-buttonItemb{
  float: right;
  font-size: 14px;
  i{
    font-size: 14px;
  }
}
.div-buttonItema{
  float: right;
  margin-right: 8px;
   font-size: 14px;
  i{
    font-size: 14px;
  }
}
   /deep/.sangeyuenei{
       color: #e6a23c;
       border: #e6a23c 1px solid;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .sangeyuenei:hover{
       color: #fff;
       border: #e6a23c 1px solid;
       background-color: #e6a23c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.sangeyueneiB{
       color: #fff;
       border: #e6a23c 1px solid;
       background-color: #e6a23c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yidaoqi{
     color: #f56c6c;
     border: solid #f56c6c 1px;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   /deep/.tabs-s{
  .el-tabs__header{
    .el-tabs__nav-wrap{
      margin-bottom: 0px !important;
     .el-tabs__nav-scroll{
      .el-tabs__nav{
        .el-tabs__item{
          border-right: none !important;
          border-left: none !important;
          background-color: #ffffff !important;
          // margin-left: 0px !important;
        }
      }
     }
    }
  }
}
/deep/.tabs-s{
.el-tabs__header{
  border-bottom: 1px solid #EBEEF5 !important;
  margin:0px 0px 8px 0px !important;
// .el-tabs__nav-wrap.is-scrollable{
//  padding:0px !important;
// }
  }
  }
   .yidaoqi:hover{
       color: #fff;
       border: #f56c6c 1px solid;
       background-color: #f56c6c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yidaoqiB{
       color: #fff;
       border: #f56c6c 1px solid;
       background-color: #f56c6c;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yiyuqi{
     color: #C0C4CC;
     border: solid #C0C4CC 1px;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .yiyuqi:hover{
       color: #fff;
       border: #C0C4CC 1px solid;
       background-color: #C0C4CC;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   /deep/.yiyuqiB{
       color: #fff;
       border: #C0C4CC 1px solid;
       background-color: #C0C4CC;
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .bangeyuenei{
     color: #67C23A;
     background-color: #fff;
     border: 1px solid #67C23A;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .bangeyuenei:hover{
     color: #fff;
     background-color: #67C23A;
     border: 1px solid #67C23A;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .bangeyueneiB{
     color: #fff;
     background-color: #67C23A;
     border: 1px solid #67C23A;
     font-size: 14px;
     i{
       font-size: 16px !important;
     }
   }
   .el-button--warning{
    background: #fff !important;
    border-color: #e6a23c !important;
    color:#e6a23c !important;
   }
   .el-button--warning.is-plain:focus, .el-button--warning.is-plain:hover{
    color: #e6a23c !important;
    background: #fdf6ec !important;
    border-color: #f5dab1 !important;
   }
   .el-button--danger{
    background: #f56c6c !important;
    border-color: #f56c6c !important;
    color:#fff !important;
   }
   .el-button--danger.is-plain:focus, .el-button--danger.is-plain:hover{
    color: #f56c6c !important;
    background: #fef0f0 !important;
    border-color: #fbc4c4 !important;
   }
   .weidaoqi{
     color: #409eff;
     border-color: #409eff;
     font-size: 14px;
   }
   /deep/.chongzhi{
       font-size: 14px;
       i{
         font-size: 16px !important;
       }
   }
   .itemButtons{
     font-size: 14px;
   }
    .el-card__body {
      padding: 10px 10px;
    }
    .picturess{
      font-size: 16px !important;
    }
    // .el-icon-bell{
    //  font-size: 16px;
    // }
    .el-tabs__nav-wrap::after{
      content:none
    }
    .queryFormItem{
      margin-top: 8px !important;
      // margin-bottom: 5px !important;
    }
    .queryFormItem .el-form-item{
      margin-bottom: 0px !important;
    }
    .el-button--danger {
      color: #f56c6c;
      background-color: #fff;
      border-color: #f56c6c;
    }
    .el-button--warning {
      color: #fc8e2d;
      background-color: #fff;
      border-color: #fc8e2d;
    }
    .el-button--info {
      color: #1b92fb;
      background-color: #fff;
      border-color: #1b92fb;
    }
</style>
